<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Keywords" content="">
    <meta name="description" content="">
    <title> 标签 </title>
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
    <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
    <link href="http://www.builive.com/apps/default/assets/css/main.css" rel="stylesheet" type="text/css" />
    <link href="css/global.css" rel="stylesheet">
    <link href="css/jquery.cxcolor.css" rel="stylesheet">
</head>

<body>
    <div class="label-wrap">
        <div class="form-horizontal">
            <div class="control-group">
                <label class="control-label">标签名</label>
                <div class="controls">
                    <input type="text" class="input-little">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">标签备注</label>
                <div class="controls">
                    <input type="text" class="input-little">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">标签字体颜色</label>
                <div class="controls">
                    <input type="color" name="name" value="">
                    <input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">标签背景颜色</label>
                <div class="controls">
                    <input type="color" name="name" value="">
                    <input id="color_b" name="mycolor" type="text" class="input_cxcolor" readonly>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">标签图片透明度</label>
                <div class="controls">
                    <input type="text" class="input-little">
                    <p style="line-height:16px;">
                        0表示透明，100表示不透明
                    </p>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">标签图片位置</label>
                <div class="controls" style="padding-top: 10px;height: 50px;">
                    <div class="label-pos-row">
                        <span class="label-pos-rowInner ext-first ext-row">左上</span>
                        <span class="label-pos-rowInner ext-row">右上</span>
                    </div>
                    <div class="label-pos-row">
                        <span class="label-pos-rowInner ext-first current">左下</span>
                        <span class="label-pos-rowInner">右下</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/bui-min.js"></script>
    <script type="text/javascript" src="http://www.builive.com/apps/default/assets/js/config-min.js"></script>
    <script type="text/javascript">

    </script>
    <script src="./js/jquery.cxcolor.min.js"></script>
    <script>
        $(function() {
            $('#color_a').cxColor();
            $('#color_b').cxColor();

            $(document).on('click', '.label-pos-rowInner', function() {
                $('.label-pos-rowInner').removeClass('current');
                $(this).addClass('current');
            })
        })
    </script>
</body>

</html>
